<?php
========== ========== ========== ========== ==========
========= Naming Conventions and Coding Style =========
========== ========== ========== ========== ==========
ID and Class Name Delimiters
    - CSS is a hyphen-delimited syntax. font-size, line-height, border-bottom etc.
    - So why then would you introduce another format?
    /* BAD */
    .error_status {}
    /* GOOD */
    #video-id {}
    .ads-sample {}
========== ========== ========== ========== ==========
choosing a structural naming convention instead of a presentational naming convention
    - presentational naming convention
    #left-col
    #right-col
    .red-link
    - structural naming convention
    #main-content
    #nav-content
    .external-link
========== ========== ========== ========== ==========
Indentation
    - Indent by 2 spaces at a time.
    .example {
      color: blue;
    }
========== ========== ========== ========== ==========
Capitalization
    /* BAD */
    color: #E5E5E5;
    /* GOOD */
    color: #e5e5e5; 
========== ========== ========== ========== ==========
Declaration Stops
    - End every declaration with a semicolon for consistency and extensibility reasons.
    /* BAD */
    .test {
      display: block;
      height: 100px
    }
    /* GOOD */
    .test {
      display: block;
      height: 100px;
    }
========== ========== ========== ========== ==========
Property Name Stops
    - Use a space after the colon.
    /* BAD */
    h3 {
      font-weight:bold;
    }
    /* GOOD */
    h3 {
      font-weight: bold;
    }
========== ========== ========== ========== ==========
Declaration Block Separation
    /* BAD: missing space */
    #video{
    margin-top: 1em;
    }
    /* BAD: unnecessary line break */
    #video
    {
      margin-top: 1em;
    }
    /* GOOD */
    #video {
      margin-top: 1em;
    }
========== ========== ========== ========== ==========
Selector and Declaration Separation
    - Separate selectors and declarations by new lines.
    /* BAD */
    a:focus, a:active {
      position: relative; top: 1px;
    }
    /* GOOD */
    h1,
    h2,
    h3 {
      font-weight: normal;
      line-height: 1.2;
    }
========== ========== ========== ========== ==========
This is the simplest and cleanest way to deal with floats.
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
      *zoom: 1; // support IE 6/7, The star is here to prevent other browsers from reading and applying this rule.
    }
========== ========== ========== ========== ==========
Parent-Child relationships
    /* BAD */
    .post {
      margin: 2em 0;
    }
    .post h1 {
      font-size: 2em;
      font-weight: normal;
    }
    /* GOOD */
    .post {
      margin: 2em 0;
    }
    .post-title {
      font-size: 2em;
      font-weight: normal;
    }
========== ========== ========== ========== ==========
========== ==== Peformance, Optimizing ==== ==========
========== ========== ========== ========== ==========
How the style system matches rules
	- One of the important things to understand about how browsers read your CSS selectors, 
	is that they read them from right to left.
	- If an element has an ID, then only ID rules that match the element�s ID will be checked. 
	-> This is the key to dramatically increasing performance.
ID, class, tag, and universal.
	- There are four kinds of key selectors: ID, class, tag, and universal.
	- ID are the most Fastest, Universal are the Slowest
Avoid universal rules
	[hidden="true"] {} 
	* {}
No unqualified selectors
	[class^="mini-icon-"] {
	  display: block;
	}
Dont tag-qualify 
	/* BAD */
	button.backButton {}
	/* GOOD */
	.backButton {}
Descendant selectors are the worst
	html body ul li a {  }
The sad truth about CSS3 selectors is that they really shouldnt be used at all if you care about page performance. 
	:nth-child  
========== ========== ========== ========== ==========
@import
	Its nice feature but poor performance.
========== ========== ========== ========== ==========
Protocol
    - Omit the protocol(http:, https:) from embedded resources. 
    - Omitting the protocol from embedded resources makes the URL relative and avoids mixed content issues and results in minor file size savings.
    <!-- Not recommended -->
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
    <!-- Recommended -->
    <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
    /* BAD */
    .example {
      background: url(http://www.google.com/images/example);
    }
    /* GOOD */
    .example {
      background: url(//www.google.com/images/example);
    }
========== ========== ========== ========== ==========
0 and Units
    - Omit unit specification
    margin: 0;
    padding: 0;
========== ========== ========== ========== ==========
Leading 0s
    - Do not use put 0s in front of values or lengths between -1 and 1. 
    font-size: .8em;
========== ========== ========== ========== ==========
Hexadecimal Notation
    - Use 3 character hexadecimal notation where possible. 
    /* BAD */
    color: #eebbcc;
    /* GOOD */
    color: #ebc;
========== ========== ========== ========== ==========
Using every declaration just once
    /* BAD */
    h1 { color: black; }
    p { color: black; }
    /* GOOD */
    h1, 
	p { color: black; }    
========== ========== ========== ========== ==========
CSS Quotation Marks
- Use single ('') rather than double ("") quotation marks for attribute selectors or property values. 
- Exception: If you do need to use the @charset rule, use double quotation marks single quotation marks are not permitted. 
- Do not use quotation marks in URI values (url()).
    /* BAD */
    html {
      font-family: "open sans", arial, sans-serif;
      background-image: url("//www.google.com/css/maia.css");
    }
    /* GOOD */
    html {
      font-family: 'open sans', arial, sans-serif;
      background-image: url(//www.google.com/css/maia.css);
    }
========== ========== ========== ========== ==========
Shorthand Properties
    - Use shorthand properties where possible.
    - Using shorthand properties is useful for code efficiency and understandability. 
    /* BAD */
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
    /* GOOD */
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
========== ========== ========== ========== ==========